<template>
  <div class="bg-gray">
    <b-container>
      <b-row>
        <b-col>
          <b-breadcrumb class="bg-gray bread-border">
            <b-breadcrumb-item to="/space">
              <b-icon icon="house-fill" scale="1.25" shift-v="1.25"/>
              个人空间
            </b-breadcrumb-item>
          </b-breadcrumb>
        </b-col>
      </b-row>
      <!--      main-->
      <b-row>

        <!--      //card-->
        <b-col cols="12" lg="6" class="mb-3">
          <div class="my-card py-3">
            <b-row class="mx-1">
              <b-col cols="4" class="text-center px-0">
                <b-avatar
                    :src="uavatarpath"
                    size="100px"
                    :variant="avatarcolor"
                    button
                    @click="showchangeavatar = true"
                    v-b-popover.hover.top="'点击修改头像'"
                    class="mt-1"
                ></b-avatar>
                <!--            <b-img :src="avatar" rounded="circle" class="avatar" height="100px" width="100px" center></b-img>-->
              </b-col>
              <b-col cols="8" class="pr-3 pl-0">
                <div>
                  <b-img :src="rankImgSrc" height="30px" width="30px" right></b-img>
                  <h5 class="mb-1 text-overflow "> {{nickname}}</h5>
                  <p class="mb-1 text-overflow">账号：{{username}}</p>
                  <p class="mb-1 text-overflow">邮箱：{{email}}</p>
                  <p class="mb-0">积分：{{rank}}</p>
                </div>
              </b-col>
              <b-col cols="12">
                <p class="mt-1 mb-0">个人简介：{{description}}</p>
              </b-col>
            </b-row>
          </div>
        </b-col>

        <!--      change avatar-->
        <update-avatar
            v-if="showchangeavatar"
            @dismiss="showchangeavatar=false"
            @onmsg="makeToast"
        ></update-avatar>

        <!--        buys-->
        <b-col cols="12" lg="6" class="mb-3">
          <div class="my-card py-3">
            <b-row class="mx-1">
              <b-col cols="12" class="text-center px-0">
                <h5 class="pb-1">买在魔盒</h5>
              </b-col>
              <b-col cols="12" class="text-ceter">
                <b-row class="">

                  <spcae-item
                      :src="buyed"
                      variant="info"
                      :count="buycount"
                      title="买到的"
                      to="/orders/buy"
                  ></spcae-item>
                  <spcae-item
                      :src="faved"
                      variant="info"
                      :count="favcount"
                      title="收藏的"
                      to="/favourites"
                  ></spcae-item>
                </b-row>
              </b-col>
            </b-row>
          </div>
        </b-col>

        <!--        sells-->
        <b-col cols="12" lg="6" class="mb-3">
          <div class="my-card py-3">
            <b-row class="mx-1">
              <b-col cols="12" class="text-center px-0">
                <h5>卖在魔盒</h5>
              </b-col>
              <b-col cols="12" class="text-ceter">
                <b-row class="">
                  <spcae-item
                      :src="selled"
                      :count="sellcount"
                      variant="primary"
                      title="卖出的"
                      to="/orders/sell"
                  ></spcae-item>
                  <spcae-item
                      :src="pubed"
                      :count="itemcount"
                      variant="primary"
                      title="发布的"
                      to="/publish"
                  ></spcae-item>

                  <spcae-item
                      :src="plus"
                      count=""
                      variant="primary"
                      title="发布"
                      to="/publish/newpub"
                  ></spcae-item>

                </b-row>
              </b-col>
            </b-row>
          </div>
        </b-col>

        <!--        settings-->
        <b-col cols="12" lg="6" class="mb-3">
          <div class="my-card py-3">
            <b-row class="mx-1">
              <b-col cols="12" class="text-center px-0">
                <h5>设置</h5>
              </b-col>
              <b-col cols="12" class="text-ceter">
                <b-row class="">

                  <spcae-item
                      :src="info"
                      :count="hcount"
                      variant="danger"
                      title="个人信息"
                      to=""
                      @click="showpro = true"
                      popup="点击修改个人信息"
                  ></spcae-item>
                  <spcae-item
                      :src="receive"
                      :count="receivecount"
                      variant="secondary"
                      title="收货地址"
                      to="/space/receiving"
                      @click="showrec = true"
                      popup="点击修改收货地址"
                  ></spcae-item>

                </b-row>
              </b-col>

              <update-info
                  v-if="showpro"
                  @dismiss="showpro = false"
                  @onmsg="makeToast"
              >

              </update-info>
            </b-row>
          </div>
        </b-col>


      </b-row>
    </b-container>
  </div>
</template>

<script>
  import urlconfig from "../urlconfig";
  import SpcaeItem from "../components/SpcaeItem";
  import UpdateInfo from "../components/UpdateInfo";
  import UpdateAvatar from "../components/UpdateAvatar";
  import {mapState} from 'vuex'

  export default {
    name: "Space",
    components: {UpdateAvatar, SpcaeItem, UpdateInfo},
    data() {
      return {
        buyed: require("../assets/gift4.svg"),
        faved: require('../assets/star1.svg'),
        pubed: require('../assets/order-temp.svg'),
        selled: require('../assets/order-get.svg'),
        info: require('../assets/info3.svg'),
        receive: require('../assets/rec1.svg'),
        plus:require('../assets/plus3.svg'),


        items: [ // for breadcramb
          {name: ''}
        ],
        rank1f: require("../assets/rank1-f.svg"),
        rank1: require('../assets/rank1.svg'),
        rank2: require('../assets/rank2.svg'),
        rank3: require('../assets/rank3.svg'),


        showchangeavatar: false,
        showpro: false,
        showrec: false,
        receivecount:'',
        itemcount:'',
        sellcount:'',
        buycount:'',
        favcount:'',
      }
    },
    methods: {
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      getReceCount(){
        if (this.$store.state.email){
          this.$ajax.post('/user/getReceCount',{uuid:this.$store.state.uuid}).then(resp=>{
            let data = resp.data
            if (data.code === 200){
              this.receivecount = data.data
            }
          }).catch(err=>{
            console.log(err);
          })
        }

      },
      getItemCount(){
        if (this.$store.state.email){
          this.$ajax.post('/item/itemcounts',{uuid:this.$store.state.uuid}).then(resp=>{
            let data = resp.data
            if (data.code === 200){
              this.itemcount = data.data
            }
          }).catch(err=>{
            console.log(err);
          })
        }

      },
      getOrderCount(){
        if (this.$store.state.email){
          this.$ajax.post('/order/getOrderCounts',{uuid:this.$store.state.uuid}).then(resp=>{
            let data = resp.data
            if (data.code === 200){
              this.sellcount = data.data.sell
              this.buycount = data.data.buy
            }
          }).catch(err=>{
            console.log(err);
          })
        }
      },
      getFavCount(){
        this.$ajax.post('/item/listfav',{uuid:this.$store.state.uuid}).then(resp=>{
          let data = resp.data
          if (data.code ===200){
            if (data.data.items) {
              this.favcount = data.data.items.length
            }
          }else{
            this.makeToast(data.msg,false)
          }
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    computed: {
      rankImgSrc() {
        if (this.$store.state.rank < 100) {
          return this.rank1f
        } else if (this.$store.state.rank < 200) {
          return this.rank1
        } else if (this.$store.state.rank < 1000) {
          return this.rank2
        } else {
          return this.rank3
        }
      },

      uavatarpath() {
        if (this.$store.state.avatarpath){
          return urlconfig.baseUrl + urlconfig.avatarResource + this.$store.state.avatarpath
        }

      },
      ...mapState(['nickname', 'rank', 'description', 'email', 'username', 'avatarcolor']),
      hcount(){
        if (this.$store.getters.hasProfile){
          return ''
        }else{
          return 1
        }
      }
    },
    mounted() {
      this.getReceCount()
      this.getItemCount()
      this.getOrderCount()
      this.getFavCount()
    }
  }
</script>

<style scoped>
  .avatar {
    border: #ef7b3e solid 3px;
  }


  .my-card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: #6e6e6e 1px 1px 5px;
  }

  .text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .show-items {
    border-top: #bdbdbd solid 1px;
  }
</style>